<template>
	<view class="enroll">
		<view class="header">
			<view class="title" :style="{ top: globalData.statusBarHeight + 'px', height: globalData.toBar + 'px', lineHeight: globalData.toBar + 'px' }">
				<uni-nav-bar backgroundColor="transparent" title="注册" left-icon="left" @clickLeft="goback" />
			</view>
		</view>

		<view class="content">
			<view class="froms">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="from.avatarUrl"></image>
				</button>

				<uni-forms :modelValue="from">
					<uni-forms-item required label="姓名" name="name">
						<input type="nickname" class="weui-input" placeholder="请输入昵称" />
					</uni-forms-item>
					<uni-forms-item label="手机号" name="phonenumber">
						<input type="nickname" v-model="from.phonenumber" placeholder="请输入手机号码" />
					</uni-forms-item>
					<uni-forms-item required name="deptId" label="学校">
						<uni-data-select v-model="from.deptId" :localdata="range" @change="change" :clear="false"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
				<button @click="submit">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
import { getSchool } from '@/services/login.js';
export default {
	data() {
		return {
			globalData: null,
			contentHeight: 0,
			from: {},
			range: [
				{ value: 0, text: '篮球' },
				{ value: 1, text: '足球' },
				{ value: 2, text: '游泳' }
			]
		};
	},
	created() {
		this.getSchoolData();
		// 在组件创建时获取 globalData
		try {
			this.globalData = wx.getStorageSync('globalData');
			this.calculateContentHeight();
		} catch (error) {
			// 处理获取存储失败的情况
			console.error('Failed to get globalData from storage:', error);
		}
	},

	methods: {
		submit(form) {
			// this.$refs.form
			// 	.validate()
			// 	.then((res) => {
			// 		console.log('表单数据信息：', res);
			// 	})
			// 	.catch((err) => {
			// 		console.log('表单错误信息：', err);
			// 	});
		},
		async getSchoolData() {
			const res = await getSchool();
			if (res.code == 200) {
				this.range = res.data.map((item) => ({
					value: item.deptId,
					text: item.deptName
				}));
			}
			console.log(res, 'res');
		},
		//绑定学校的下拉框的选择
		change(e) {
			console.log('e:', e);
		},
		goback() {
			uni.navigateBack();
		},
		calculateContentHeight() {
			const statusBarHeight = this.globalData.statusBarHeight;
			const toBarHeight = this.globalData.toBar;
			const additionalHeight = 100; // 额外的 60px

			// 计算内容高度
			const contentHeight = `calc(100vh - (${statusBarHeight}px + ${toBarHeight}px + ${additionalHeight}px))`;

			this.contentHeight = contentHeight;
		},
		switchbook() {
			uni.navigateTo({
				url: '/pages/switchbooks/index'
			});
		},
		goGame() {
			uni.navigateTo({
				url: '/pages/ingame/index'
			});
		},
		onChooseAvatar(e) {
			console.log(e, 'e');
			const { avatarUrl } = e.detail;
			this.$set(this.from, 'avatarUrl', avatarUrl);
		}
	}
};
</script>

<style scoped lang="scss">
.enroll {
	height: 100vh;
	position: relative;
	.header {
		width: 100%;
		height: 360rpx;
		background-color: #fff;
		overflow: hidden;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.title {
			position: absolute;
			width: 100%;
			left: 50%;
			/* top: 20px; */
			transform: translate(-50%, 0);
			color: white;
			font-size: 32rpx;
		}
	}
	.content {
		height: calc(100vh - 360rpx);
		width: 100%;
		.froms {
			width: 650rpx;
			margin: 0 auto;
			.avatar-wrapper {
				width: 200rpx;
				height: 200rpx;
				padding: 0 !important;
			}
		}
	}

	::v-deep {
		.uni-navbar--border {
			border-bottom-color: transparent !important;
		}
	}
}
</style>
